<template lang="html">

  <div class="car">
    <selfHeader></selfHeader>
    <div class="main">
      <section class="my-vip">

        <div @click="moveTo" class="pathMain">
          <div class="my-vip-top-div" >
            <span class="icon2-vip">
            <span class="path1"></span><span class="path2"></span><span class="path3"></span><span
              class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span
              class="path8"></span><span class="path9"></span>
            </span>
          </div>
          <p style="display: flex;justify-content: space-between; align-items: center">
            <span>实名认证</span>
            <i v-if="cardId === '' || !cardId" class="icon-go"></i>
            <span v-else style="float: right">已认证</span>
          </p>
        </div>

<!--        <router-link class="my-vip-bottom ho" :to="{ path: '/changePhone'}">-->
<!--          <div>-->
<!--            <span class="icon2-money"></span>-->
<!--          </div>-->
<!--          <p>-->
<!--            <span>修改手机号</span><i class="icon-go"></i>-->
<!--          </p>-->
<!--        </router-link>-->
        <router-link class="my-vip-bottom ho" :to="{ path: '/means'}">
          <div>
            <span class="icon2-money"></span>
          </div>
          <p>
            <span>个人中心</span><i class="icon-go"></i>
          </p>
        </router-link>
      </section>
    </div>
    <button @click="logOut" class="btn">退出登录</button>
  </div>
</template>

<script>
import {appUserInfo} from '@/http/api'
import Baseline from '@/common/_baseline.vue'
import selfHeader from '@/common/header'

export default {
  components: {
    'v-baseline': Baseline,
    selfHeader
  },
  data() {
    return {
      userForm: {}
    }
  },
  created() {
    this.getUser()
    this.cardId = JSON.parse(localStorage.getItem('UserMessage')).user.cardId
    console.log(this.cardId)
  },
  methods: {
    async getUser() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid
      }
      const res = await appUserInfo(data)
      if (res.code * 1 === 200) {
        this.userForm = res.data
      }
    },
    logOut() {
      localStorage.clear()
      this.$router.push('/')
    },
    moveTo () {
      if (this.cardId === '' || !this.cardId) {
        this.$router.push({path: '/attestation'})
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.car {
  width: 100%;
  padding-top: 10vw;
  background-color: #F8FCFF;

  .main {
    width: 100%;

    .my-indent {
      width: 100%;
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #333;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0 5vw;
      height: 15vw;
      line-height: 15vw;
      background-color: #fff;
      .bd();

      &:active {
        background-color: rgb(224, 227, 230)
      }

      .my-indent-right {
        span {
          display: inline-block;
          .fz(font-size, 28);
          color: rgba(0, 0, 0, .4);
          position: relative;
        }

        i {
          position: relative;
          top: .8vw;
        }
      }
    }

    .my-pay {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding: 2vw 0;
      background-color: #fff;
      .bd();

      > a {
        display: block;
        width: 33.33%;
        color: #999;
        text-align: center;

        > span {
          .fz(font-size, 50);
          margin-top: 2.3vw;
          display: block;
          text-align: center;
        }

        p {
          padding: 2.3vw 0;
          text-align: center;
        }
      }
    }

    .my-vip, .my-service, .my-settle {
      width: 100%;
      .mt();
      .bd();
      .bt();

      > a {
        background-color: #fff;
        display: block;
        width: 100%;
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 15vw;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 6vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:active {
          background-color: rgb(224, 227, 230);
        }

        > div {
          -ms-flex: 2;
          -webkit-box-flex: 2;
          flex: 2;
          padding-top: 1.3vw;
        }

        .my-vip-top-div {
          padding-top: 0;
        }

        > p {
          -ms-flex: 10;
          -webkit-box-flex: 10;
          flex: 10;
          position: relative;

          &:active {
            background-color: rgb(224, 227, 230);
          }

          i {
            position: absolute;
            right: 0;
            top: .4vw;
          }
        }
      }

    }
  }
}

/*图标大小不一，重新定义*/

.icon-go {
  .fz(font-size, 36);

  &::before {
    color: #aba8a8;
  }
}

[class^="icon2-"],
[class*=" icon2-"] {
  .fz(font-size, 50);
}

.icon2-service {
  .fz(font-size, 34);
}

.btn {
  margin-top: 40px;
}
.pathMain {
  display: flex;
  height: 15vw;
  padding: 0 6vw;
  justify-content: space-between;
  background-color: white;
  p,span, div {
    height: 15vw;
    line-height: 15vw;
  }
  p {
    -webkit-box-flex: 10;
    flex: 10;
    position: relative;
  }
  div {
    -webkit-box-flex: 2;
    flex: 2;
    padding-top: 1.3vw;
  }
}
</style>
